<template>
<div class="page-panel">
    <div class="page-head">
        <div class="left">
            <div class="avatar-group">
                <el-avatar class="avatar-left" shape="square" :size="50" icon="el-icon-user-solid"></el-avatar>
                <div class="avatar-right">
                    <div class="fullname">
                        销售:{{ order.user.realname }}
                        <el-tag type="danger" v-if="order.user.status == 0">已离职</el-tag>
                    </div>
                    <div class="tags">
                        订单号：{{ bom.order_no }}
                    </div>
                </div>
            </div>
        </div>
        <div class="right">
            <el-button-group>
                <el-dropdown trigger="click" @command="handleMore">
                    <el-button type="primary">
                        更多
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-has="'order-refund'" command="refund">退单</el-dropdown-item>
                        <el-dropdown-item v-has="'order-delay'" command="delay">延期</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-button type="primary" style="float: right" icon="el-icon-close" @click="closeDrawer"></el-button>
            </el-button-group>
        </div>
    </div>

    <div class="page-body">
        <el-descriptions :colon="false" :column="5" direction="vertical">
            <el-descriptions-item labelClassName="desc-label" label="贵宾姓名">{{ vip.name }}</el-descriptions-item>
            <el-descriptions-item labelClassName="desc-label" label="贵宾电话">{{ vip.phone }}</el-descriptions-item>
            <el-descriptions-item labelClassName="desc-label" label="贵宾身份证">{{ vip.id_card }}</el-descriptions-item>
            <el-descriptions-item labelClassName="desc-label" label="贵宾预产期">{{ vip.event_date }}</el-descriptions-item>
            <el-descriptions-item labelClassName="desc-label" label="贵宾生产医院">{{ vip.hospital }}</el-descriptions-item>

            <el-descriptions-item labelClassName="desc-label" label="贵宾家庭地址">{{ vip.address }}</el-descriptions-item>
            <el-descriptions-item labelClassName="desc-label" label="紧急联系人">{{ vip.urgent_name }}</el-descriptions-item>
            <el-descriptions-item labelClassName="desc-label" label="紧急联系人电话">{{ vip.urgent_phone }}</el-descriptions-item>
            <el-descriptions-item labelClassName="desc-label" label="紧急联系人关系">{{ vip.urgent_relation }}</el-descriptions-item>
            <el-descriptions-item labelClassName="desc-label" label="创建时间">{{ order.create_time }}</el-descriptions-item>

            <el-descriptions-item labelClassName="desc-label" label="门店">{{ bom.store.title }}</el-descriptions-item>
            <el-descriptions-item labelClassName="desc-label" label="套餐">{{ bom.package.title }}</el-descriptions-item>
            <el-descriptions-item labelClassName="desc-label" label="入住时间">{{ bom.start_time }}</el-descriptions-item>
            <el-descriptions-item labelClassName="desc-label" label="离店时间">{{ bom.end_time }}</el-descriptions-item>
            <el-descriptions-item labelClassName="desc-label" label="签单时间">{{ bom.sign_date }}</el-descriptions-item>

        </el-descriptions>
    </div>
</div>
</template>

<script>
import {
    doRefundApi
} from "@/api/order/order";
import {order, bom, vip} from "../model";

export default {
    props: {
        order: {
            type: Object,
            default: function () {
                return Object.assign({}, order);
            },
        },
        bom: {
            type: Object,
            default: function () {
                return Object.assign({}, bom);
            },
        },
        vip: {
            type: Object,
            default: function () {
                return Object.assign({}, vip);
            }
        },
    },
    data() {
        return {};
    },
    methods: {
        handleMore(e) {
            switch (e) {
                case "refund": // 转交订单
                    this.$confirm("确定要退单吗？", "提示", {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            type: "warning",
                        })
                        .then(() => {
                            let params = {
                                id: this.order.id,
                            };
                            doRefundApi(params).then((res) => {
                                this.$message(res.msg);
                            });
                        })
                        .catch(() => {
                            // 用户点击取消，不执行任何操作
                        });
                    break;
                case "delay": // 延期
                    break;
            }
        },
        closeDrawer() {
            this.$parent.closeDrawer();
        },
    },
};
</script>

<style lang="less" scoped>
.page-panel {
    height: 265px;
    background: #f6f9fd;
    padding: 20px;

    .page-head {
        display: flex;
        align-items: center;

        .left {
            flex: 1;
        }

        .right {
            flex: 1;
            text-align: right;
        }

    }

    .mr5 {
        margin-right: 5px;
    }

    .mr5:last-child {
        margin-right: 0;
    }

    .page-body {
        padding-top: 20px;

        /deep/ .desc-label {
            // width: 150px;
            font-size: 13px;
            font-weight: 700;
        }

        /deep/ .el-descriptions__body {
            background-color: unset;

            .el-descriptions__table {
                tbody {
                    margin-bottom: 12px;
                }
            }
        }
    }
}
</style>
